<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath(); //web项目的根路径
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="<%=basePath  %>js/layui2.4.5/css/layui.css">
  <script src="<%=basePath  %>js/jquery.min.js"></script>
  <style type="text/css">
  	.title { background: #000 ; }
  </style>
<body>


<hr class="layui-bg-red">
<hr class="layui-bg-blue">
<div>
<blockquote class="layui-elem-quote">用户详情</blockquote>

<table id="demo" lay-filter="barDemo"></table>

</div>
<script src="<%=basePath  %>js/layui2.4.5/layui.js"></script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,url: '<%=basePath  %>findListByPage' //数据接口
    ,page: true //开启分页
    ,toolbar: true
    ,limit: 5
    ,limits: [5,10,15]
    ,cols: [[ //表头
       {field: 'userId', title: '用户ID',  sort: true, fixed: 'left' }
      ,{field: 'userName', title: '用户名'}
      ,{field: 'userPassword', title: '密码',sort: true}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
  });
  
  table.on('tool(barDemo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	 
	  if(layEvent === 'detail'){ //查看
		 layer.open({
			  type: 2,
			  area: ['700px', '450px'],
			  fixed: false, //不固定
			  maxmin: true,
			  content: '<%=basePath  %>detail'
			});
	    //do somehing
	  } else if(layEvent === 'del'){ //删除
	     layer.confirm('真的删除行么', function(index){
	      //向服务端发送删除指令
	      $.ajax({  
				type : "get",  //提交方式  
				url : "<%=basePath %>deleteUser",//路径  
				data : {  
				   "userId": data.userId
				},//数据，这里使用的是Json格式进行传输  
				success : function(result) { //返回数据根据结果进行相应的处理 
					if (result.success) {  
						//  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.msg('已删除', {icon: 6})
						  $(".layui-laypage-btn").click()
					      layer.close(index);
					} else {  
						layer.alert("删除失败请重试")
					}  
				} ,
				error:function(result){
					layer.alert("删除失败请重试")
		        }
				
			});
	    }); 
	  } else if(layEvent === 'edit'){ //编辑
	    //do something
	    
	    //同步更新缓存对应的值
	    obj.update({
	      username: '123'
	      ,title: 'xxx'
	    });
	  }
	});
  
  function deleteByid(userId){
	  $.ajax({  
			type : "get",  //提交方式  
			url : "<%=basePath %>deleteUser",//路径  
			data : {  
			   "userId": userId
			},//数据，这里使用的是Json格式进行传输  
			success : function(result) { //返回数据根据结果进行相应的处理 
				var data = eval("("+result+")");//将字符串格式化为json对象
				if (data.success) {  
					$("#code").attr("placeholder","验证码发送成功，请前往邮箱查看")
				} else {  
					$("#code").attr("placeholder","验证码发送失败，请稍后重试");
				}  
			}  
		});
  }
  
});
</script>
</body>
</html>